<template>
  <!-- 列表组件 -->
  <div class="equip-box">
    <div
      v-for="(item,index) in dataList"
      :key="index"
      class="equip-box-one"
      :class="nowIndex===index?'equip-box-one-active':''"
      @click="selectionChange(item,index)"
    >{{ item.equipmentName }}</div>
  </div>
</template>
<script>
import equipScrapRecordApi from "@/api/processing-management/equip-manage/equip-scrap-record";

export default {
  props: {
    // equipmentName: {
    //   type: String,
    //   default: ""
    // },
    // equipmentTypeCode: {
    //   type: String,
    //   default: ""
    // }
  },
  data() {
    return {
      dataList: [],
      nowIndex: "",
      equipmentName: "",
      equipmentTypeCode: ""
    };
  },
  watch: {},
  created() {
    this.queryList();
  },
  mounted() {},
  methods: {
    // handle(v) {
    //   if (v) {
    //     let showList = []
    //     this.dataList.forEach(a => {
    //       if (a.equipmentName.indexOf(v) !== -1) {
    //         showList.push(a)
    //       }
    //     })
    //     this.showList = showList
    //   } else {
    //     this.showList = this.dataList
    //   }
    // },
    query(equipmentName, equipmentTypeCode) {
      this.equipmentName = equipmentName;
      this.equipmentTypeCode = equipmentTypeCode;
      this.queryList();
    },
    selectionChange(e, index) {
      this.nowIndex = index;
      this.$emit("selectionChange", e);
    },
    // 获取设备数据
    queryList() {
      let params = {
        equipmentName: this.equipmentName,
        equipmentTypeCode: this.equipmentTypeCode
      };
      equipScrapRecordApi.queryNotDiscardAndDisable(params).then(res => {
        if (res.code === 1) {
          let data = res.data || [];
          this.dataList = data;
          // for (var i in data) {
          //   this.dataList.push({
          //     equipmentName: data[i],
          //     equipmentCode: i
          //   })
          // }
          if (this.dataList.length > 0) {
            this.selectionChange(this.dataList[0], 0);
          }
        }
      });
    }
  }
};
</script>
<style lang="scss"  scoped>
.equip-box {
  width: 100%;
  height: 100%;
  padding: 10px 0;
}
.equip-box-one {
  width: 100%;
  padding: 15px 10px;
  color: #fff;
  font-size: 15px;
  background-color: #024558;
  margin: 5px 0;
  cursor: pointer;
  &:hover {
    color: #000000;
    font-weight: 700;
    background-color: #fff;
  }
}
.equip-box-one-active {
  color: #000000;
  font-weight: 700;
  background-color: #fff;
}
</style>
